<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div style="width: 100px; height:100px;background-color:pink;"></div>
    <script>
        // async function async1() {
        //     console.log('async1 start');
        //     // await 会阻塞后面的代码执行，执行完async2()后，跳出async1()，执行同步代码
        //     await async2();
        //     console.log('async1 end');
        // }
        function async1() {
            console.log('asnyc1 start') // 2
            return async2().then(() => {
                console.log('async1 end') // 6
            })
        }
        // async function async2() {
        //     console.log('async2');
        // }
        function async2() {
            console.log('async2') // 3
            return Promise.resolve()
        }
        console.log('script start'); // 1
        setTimeout(function () {
            console.log('setTimeout'); // 8
        }, 0)
        async1();
        new Promise(function (resolve) {
            console.log('promise1'); // 4
            resolve();
        }).then(function () {
            console.log('promise2'); // 7
        });
        console.log('script end'); // 5
        document.querySelector('div').style.width = '200px'
        document.querySelector('div').style.backgroundColor = 'red'
    </script>
</body>

</html>